import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/Addons.js";
//引入UI控制器
import GUI from "lil-gui";
const gui = new GUI();

//加载管理器
const loadingManage = new THREE.LoadingManager();
loadingManage.onStart = () => {
  console.log("开始加载");
};
loadingManage.onLoad = () => {
  console.log("加载完成");
};
loadingManage.onProgress = () => {
  console.log("加载中");
};
loadingManage.onError = () => {
  console.log("加载失败");
};

/*
    使用纹理加载器
*/
//声明加载器实例
const textureLoader = new THREE.TextureLoader(loadingManage);
//加载器加载纹理，参数是图片路径
const colorTexture = textureLoader.load("src/assets/textures/door/color.jpg");
const alphaTexture = textureLoader.load("src/assets/textures/door/alpha.jpg");
const heightTexture = textureLoader.load("src/assets/textures/door/height.jpg");
const normalTexture = textureLoader.load("src/assets/textures/door/normal.jpg");
const ambientOcclusionTexture = textureLoader.load(
  "src/assets/textures/door/ambientOcclusion.jpg"
);
const metalnessTexture = textureLoader.load(
  "src/assets/textures/door/metalness.jpg"
);
const roughnessTexture = textureLoader.load(
  "src/assets/textures/door/roughness.jpg"
);

//坐标重复
colorTexture.repeat.x = 3;
colorTexture.repeat.y = 3;

//设置包裹
colorTexture.wrapS = THREE.MirroredRepeatWrapping;
colorTexture.wrapT = THREE.RepeatWrapping;

//平移纹理
colorTexture.offset.x = 5;
colorTexture.offset.y = 2;

//旋转
colorTexture.rotation = 3;

colorTexture.generateMipmaps = false;
//缩小滤镜
colorTexture.minFilter = THREE.NearestFilter;
//放大滤镜
colorTexture.magFilter = THREE.LinearFilter;

const sizes = {
  width: window.innerWidth,
  height: window.innerHeight,
};

//监听窗口变化事件
window.addEventListener("resize", () => {
  //   console.log(window.innerWidth);
  sizes.width = window.innerWidth;
  sizes.height = window.innerHeight;

  //调整相机
  camera.aspect = sizes.width / sizes.height;
  camera.updateProjectionMatrix(); //更新相机

  //调整渲染器
  renderer.setSize(sizes.width, sizes.height);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
});

//创建第一个场景
const scene = new THREE.Scene();

//创建物体
//几何体--立方体
// const geometry = new THREE.BoxGeometry(1, 1, 1);

//几何体--圆环
const geometry = new THREE.TorusGeometry(1, 0.35, 32, 100);
console.log(geometry.attributes);

//材质
const material = new THREE.MeshBasicMaterial({ map: colorTexture });
//创建网格
const cube = new THREE.Mesh(geometry, material);
//将网格添加到场景
scene.add(cube);

//创建摄像机
const camera = new THREE.PerspectiveCamera(60, sizes.width / sizes.height);
//相机位置
camera.position.z = 5;

camera.lookAt(cube.position);

// 将相机加入场景
scene.add(camera);

//创建渲染器材
const renderer = new THREE.WebGLRenderer();
renderer.setSize(sizes.width, sizes.height);
document.body.appendChild(renderer.domElement);

//控制器
//两个参数 要控制的相机 参考点--一般是渲染的画布
const controls = new OrbitControls(camera, renderer.domElement);
// 如果开启了阻尼，需要每帧都更新控制器
controls.enableDamping = true;

/*
    GUI控制面板
*/
//给物体cube添加一个颜色选择器
console.log(cube);

gui.addColor(cube.material, "color").name("Label");
gui.add(cube.position, "x", 0, 10, 1);
gui.add(cube.material, "wireframe");

const change = () => {
  controls.update();
  renderer.render(scene, camera);
  window.requestAnimationFrame(change);
};
change();
